<template>
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="workstationEditWinDialogVisible"
      title="修改单位"
      width="70%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="editWorkstation" label-width="auto">
        <el-form-item style="font-weight: bold;width: 480px;float: left;" label="工作站编码">
          <el-input v-model="editWorkstation.workstationCode"/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 400px;margin-left: 600px" label="工作站名称">
          <el-input v-model="editWorkstation.workstationName"/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 480px;float: left;" label="工作站地址">
          <el-input v-model="editWorkstation.workstationAddress"/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 600px;margin-left: 600px" label="所在车间">
          <el-select v-model="editWorkstation.workShopId" style="width: 250px">
            <el-option v-for="workShop in workShops" :value="workShop.workShopId" :label="workShop.workShopName"/>
          </el-select>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 380px;float: left;" label="所属工序">
          <el-select v-model="editWorkstation.processId" style="width: 250px">
            <el-option v-for="process in procezz" :value="process.processId" :label="process.processName"/>
          </el-select>
        </el-form-item>


        <el-form-item style="font-weight: bold;margin-left: 600px;" label="是否启用">
          <el-radio-group v-model="editWorkstation.workstationStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="备注">
          <el-input v-model="editWorkstation.remark" type="textarea"/>
        </el-form-item>
      </el-form>

    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelEditWorkstation">取消</el-button>
        <el-button type="primary" @click="editWorkstationSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref , watch} from 'vue'
import {ElMessage} from "element-plus";
import workShopRequest from "@/api/workShop.js";
import workstationRequest from "@/api/workstation.js";
import processRequest from "@/api/process.js";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['editComplete','cancelWorkstationEdit'])
// 弹窗标记
let workstationEditWinDialogVisible = ref(false);
// 申明的属性
// workstationId: 当前要编辑的单位的编号
let props = defineProps(["workstationId"]);
// 编辑的单位对象
let editWorkstation = ref({})

// 定义数组保存所有车间信息
let workShops = ref([]);
// 定义数组保存所有工序信息
let procezz = ref([]);

/**
 * 取消编辑按钮事件
 */
function cancelEditWorkstation(){
  // 将当前的编辑对象置空
  editWorkstation = ref({});
  // 关闭窗体
  workstationEditWinDialogVisible.value = false;
  // 触发暴漏出去的取消编辑的事件
  emits("cancelWorkstationEdit")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  // 触发暴漏出去的取消编辑的事件
  emits("cancelWorkstationEdit")
}

/**
 * 编辑提交
 */
function editWorkstationSubmit(){
  if (editWorkstation.value.workShopId) {
    workShopRequest.selectById(editWorkstation.value.workShopId,res => {
      // 更新 newMaterial 的值
      editWorkstation.value.workShopCode = res.data.workShopCode;
      editWorkstation.value.workShopName = res.data.workShopName;
      if (editWorkstation.value.processId) {
        processRequest.showByProcessId(editWorkstation.value.processId,res=>{
          editWorkstation.value.processName = res.data.processName;
          workstationRequest.updateWorkstationById(editWorkstation.value,res=>{
            if(res.code == 200){
              ElMessage({
                type:"success",
                message:"编辑工作站成功"
              });
              // 关闭弹窗
              cancelEditWorkstation();
              // 触发编辑完成的事件
              emits('editComplete',res.data);
            }else if (res.data == '工作站编码不能为空') {
              ElMessage({
                type:"warning",
                message:"工作站编码不能为空"
              });
            } else if (res.data == '工作站名称不能为空') {
              ElMessage({
                type:"warning",
                message:"工作站名称不能为空"
              });
            } else {
              ElMessage({
                type:"warning",
                message:"新增工作站失败"
              });
            }
          });
        });
      } else {
        ElMessage({
          type:"warning",
          message:"工序必须选择"
        });
      }

    }); } else {
    ElMessage({
      type:"warning",
      message:"车间必须选择"
    });
  }
}


/**
 * 通过 workstationId 加载任务信息
 * @param workstationId
 */
function loadWorkstationById(workstationId){
  workstationRequest.selectById(workstationId,res=>{
    if(res.data){
      editWorkstation.value = res.data;
      // 弹窗
      workstationEditWinDialogVisible.value = true;
    }
  });
}

/**
 * 侦听器 侦听 props.workstationId
 * // 每次属性 props.workstationId 发生变化这里都会执行
 */
watch(()=>props.workstationId,()=>{
  // 判断 workstationId 是否是-1，如果是-1，说明是取消操作，不需要做任何操作。
  if(props.workstationId != -1){
    // 如果不是-1 就加载要编辑的数据
    loadWorkstationById(props.workstationId);
  }
});

onMounted(()=>{
  // 加载工序对象
  processRequest.listAll(res => {
    // 将查询的列表赋值给 procezz
    procezz.value = res.data;
  })

  //加载工作站对象
  workShopRequest.ListWorkShops(res => {
    workShops.value = res.data;
  })
})
</script>
<style scoped>
</style>